Scale Fade

Source

The ScaleFade component is a utility in the Pearl UI library that provides a view with a scaling fade transition. It can be used to hide and show content based on a boolean prop show.

Import#

import { ScaleFade } from "pearl-ui";

Usage#

The ScaleFade component can be used to hide and show content based on a boolean prop show. Here is a basic usage example:

<ScaleFade show={isOpen}>  <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">    <Text color="white">This is the content</Text>  </Box></ScaleFade>

Changing the initial scale#

You can change the initial scale of the content by using the initialScale prop. This can be a number.

<ScaleFade show={isOpen} initialScale={0.8}>  <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">    <Text color="white">This is the content</Text>  </Box></ScaleFade>

Changing transitions manually#

You can manually change the transitions of the ScaleFade component by using the transition and exitTransition props. These props accept an object that defines the type, duration, and easing of the transition.

<ScaleFade  show={isOpen}  transition={{ duration: 200 }}  exitTransition={{ duration: 0 }}>  <Box mb="4" p="4" bgColor="teal" borderRadius="m" boxShadow="l">    <Text color="white">This is the content</Text>  </Box></ScaleFade>

Example#

Embed not loading? Click here

Component Properties#

Supported Style Properties#

The ScaleFade component composes the Box component, so you can pass all Box related props to it.

Additional Properties#

The ScaleFade component also accepts the following additional props:

Name	Required	Type	Default	Description
`show`	Yes	boolean		If `true`, the content will be visible.
`initialScale`	No	number	`0.7`	The initial scale of the element.